<template>
  <span>
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" label-width="68px" class="form-flex">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <el-form-item label="单号" prop="no">
            <el-input
              v-model="queryParams.no"
              placeholder="请输入单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="重要程度" prop="degreeImportance">
            <el-select v-model="queryParams.degreeImportance" placeholder="请选择重要程度" clearable size="small">
              <el-option
                v-for="item in dict.degree_importance"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="反映人" prop="reflectPeople">
            <el-input
              v-model="queryParams.reflectPeople"
              placeholder="请输入反映人名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="手机号" prop="phoneNum">
            <el-input
              v-model="queryParams.phoneNum"
              placeholder="请输入手机号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="发起人" prop="charterMemberName">
            <el-input
              v-model="queryParams.charterMemberName"
              placeholder="请输入发起人名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="发起日期">
            <el-date-picker
              v-model="charterTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="发起日期开始"
              end-placeholder="发起日期结束">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="success" size="mini" :icon="queryParams.params.searchQuery?'el-icon-loading':''" @click="$refs.queryRef.show()">高级查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      :data="workOrderList"
      @selection-change="handleSelectionChange"
      tooltip-effect="light">
      <el-table-column label="单号" align="center" prop="no" width="180">
         <template slot-scope="scope">
          <el-link type="primary" @click="clickView(scope.row)">{{scope.row.no}}</el-link>
         </template>
      </el-table-column>
      <el-table-column label="发起时间" align="center" prop="charterTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.charterTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单类型" align="center" prop="orderTypeName" width="100"/>
     <el-table-column label="工单来源" align="center" prop="wordType" >
            <template slot-scope="scope">
                {{ dict.label.work_type[scope.row.wordType] }}
            </template>
        </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :value="scope.row.status" :datas="dict.work_order_status"/>
        </template>
      </el-table-column>
      <el-table-column label="重要程度" align="center" prop="degreeImportance" width="80">
        <template slot-scope="scope">
          {{ dict.label.degree_importance[scope.row.degreeImportance] }}
        </template>
      </el-table-column>
      <el-table-column label="内容描述" align="center" prop="content" width="150">
        <template slot-scope="scope">
          <l-tooltip :title="scope.row.content" :max="8"></l-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="所在位置" align="center" prop="location" width="150">
        <template slot-scope="scope">
          <l-tooltip :title="scope.row.location" :max="8"></l-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center" prop="charterMemberName" width="80">
        <template slot-scope="scope">
          <l-tooltip :title="scope.row.charterMemberName" :max="3"></l-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="反映人" align="center" prop="reflectPeople" width="80" show-overflow-tooltip/>
      <el-table-column label="手机号" align="center" prop="phoneNum" width="100" show-overflow-tooltip/>
      <el-table-column label="接单人" align="center" prop="receivingPersonName" width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.jointlyPersonName?scope.row.receivingPersonName + ',' + scope.row.jointlyPersonName:scope.row.receivingPersonName}}
        </template>
      </el-table-column>
      <el-table-column label="挂单人" align="center" prop="suspendPersonName" width="80" show-overflow-tooltip/>
        <el-table-column label="总工时" align="center" prop="formatBetween" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
        <template slot-scope="scope">
            <el-button v-if="scope.row.status == '10'" size="mini" type="text" @click="handleSendOrders(scope.row)" v-hasPermi="['workorder:workOrder:sendOrders']">派单</el-button>
            <el-button v-if="scope.row.status == '10'" size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['workorder:workOrder:edit']">修改</el-button>
            <el-button v-if="scope.row.status == '10'" size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['workorder:workOrder:edit']">删除</el-button>
            <el-button v-if="scope.row.status == '20'" size="mini" type="text" @click="handleurgeOrder(scope.row)" v-hasPermi="['workorder:workOrder:urgeOrder']">催办</el-button>
            <el-button v-if="scope.row.status == '20'" size="mini" type="text" @click="handleConclude(scope.row)" v-hasPermi="['workorder:workOrder:conCludeOrder']">办结</el-button>
            <el-button v-if="scope.row.status == '30'" size="mini" type="text" @click="handleEndSuspendOrders(scope.row)" v-hasPermi="['workorder:workOrder:endSuspendOrder']">取消挂单</el-button>
            <el-button v-if="scope.row.status == '40'" size="mini" type="text" @click="handleReturnOrders(scope.row)" v-hasPermi="['workorder:workOrder:returnOrder']">回访</el-button>
<!--            <el-button v-if="scope.row.status == '50'" size="mini" type="text"-->
<!--                      >二次回访</el-button>-->
            <el-button v-if="scope.row.status == '70'" size="mini" type="text" @click="handleRepairOrders(scope.row)" v-hasPermi="['workorder:workOrder:repairOrder']">返修</el-button>
<!--            <el-button v-if="scope.row.status == '50'" size="mini" type="text"-->
<!--                      >调整公时</el-button>-->
            <el-popover placement="left" trigger="click">
<!--              <el-button type="text" size="mini">跟进</el-button>-->
              <el-button type="text" size="mini" @click="handleSuspendOrders(scope.row)" v-hasPermi="['workorder:workOrder:suspendOrder']">挂单</el-button>
              <el-button type="text" size="mini" @click="handleRetreatOrder(scope.row)" v-hasPermi="['workorder:workOrder:retreatOrder']">退单</el-button>
<!--              <el-button type="text" size="mini" >协办</el-button>-->
              <el-button type="text" size="mini"  @click="handleCareOrders(scope.row)" v-hasPermi="['workorder:workOrder:careOrder']">转交</el-button>
              <el-button type="text" size="mini" @click="handleChargebackOrders(scope.row)" v-hasPermi="['workorder:workOrder:chargebackOrder']">取消</el-button>
              <el-button size="mini"  type="text" slot="reference"><span style="margin-left: 10px;" v-if="scope.row.status == '20'">更多</span></el-button>
            </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>

    <l-super-query ref="queryRef" keyName="workOrderList" :columns="queryColumns" @searchQuery="searchQuery"  @resetting="queryParams.params.searchQuery=null"/>

    <base-component ref="baseRefs" :pageKey="pageKey"></base-component>
    <!--派单-->
    <send-orders-form ref="sendRefs" @cancel="getList"/>

    <conclude-form ref="cludeRef" @cancel="getList"/>

    <return-forms ref="returnRefs" @cancel="getList"/>

    <care-form ref="cardRef" @cancel="getList"/>

    <chargeback-form ref="chargeRef" @cancel="getList"/>

    <suspend-form ref="suspendRef"  @cancel="getList"/>

    <repair-form ref="repaifRef" @cancel="getList"/>

    <retreat-form ref="reteRef"  @cancel="getList"/>
  </span>
</template>

<script>

  import {listMixin} from "@/utils/mixins/listMixin";
  import {workOrderMixin} from "./workOrderMixin";
  import {listWorkOrder, delWorkOrder, exportWorkOrder, sendOrders,urgeOrder,endSuspendOrder} from "@/api/workorder/workOrder";
  import {getWorkOrderType} from "@/api/workorder/workOrderType";
  import BaseComponent from '@/views/workorder/components'
  import SendOrdersForm from './sendOrdersForm'
  import  ConcludeForm from './ConcludeForm'
  import  returnForms from './returnForm'
  import  careForm from './careForm'
  import  chargebackForm from './chargebackForm'
  import  suspendForm from './suspendForm'
  import repairForm  from './repairForm'
  import retreatForm from './retreatForm'
  export default {
    name: "WorkOrder",
    mixins: [listMixin, workOrderMixin],
    components: { BaseComponent, SendOrdersForm,ConcludeForm,returnForms,careForm,chargebackForm,suspendForm,repairForm,retreatForm},
    dicts: ['coverage', 'degree_importance', 'service_type', 'complaints_type', 'project_identification', 'work_order_status','work_type'],
    data() {
      return {
        // 工单管理表格数据
        workOrderList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          communityId: null,
          floorId: null,
          unitId: null,
          roomId: null,
          no: null,
          orderType: null,
          charterMemberId: null,
          charterMemberName: null,
          charterTime: null,
          coverage: null,
          degreeImportance: null,
          location: null,
          reflectPeopleId: null,
          reflectPeople: null,
          phoneNum: null,
          content: null,
          warrantyProject: null,
          repairType: null,
          complaintType: null,
          status: null,
          params: {}
        },
        charterTime: [],
        pageKey: ''
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询工单管理列表 */
      getList() {
        this.loading = true;
        let queryParams = this.addDateRange(this.queryParams, this.charterTime, "charterTime")
        listWorkOrder(queryParams).then(response => {
          this.workOrderList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery(defaultParams) {
        this.queryParams.pageNum = 1;
        this.queryParams = Object.assign(this.queryParams, defaultParams)
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.charterTime = []
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        let me = this
        getWorkOrderType(row.orderType).then(res => {
          me.pageKey = res.data.associationForm
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            try {
              me.$refs.baseRefs.init({type: 'UPDATE', id: row.id, orderType: res.data.id, typeName: res.data.typeName})
            } catch (e) {
              this.msgError("获取工单信息异常,请刷新重新尝试。")
            }
            loading.close();
          }, 1000)
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除工单管理编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delWorkOrder(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有工单管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportWorkOrder(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {
        });
      },
      searchQuery(queryParams) {
        this.queryParams.params['searchQuery'] = queryParams
        this.getList()
      },
      /** 复制代码成功 */
      clipboardSuccess() {
        this.msgSuccess("复制成功");
      },
      //派单
      handleSendOrders(row) {
        this.$refs.sendRefs.show({id: row.id})
      },
      //办结
      handleConclude(row){
        this.$refs.cludeRef.show({id: row.id})
      },
      //催办
      handleurgeOrder(row) {
        urgeOrder({id: row.id}).then(res=>{
          this.msgSuccess(" 该工单已经催办，请耐心等待")
        })
      },
      //取消挂单
      handleEndSuspendOrders(row){
        endSuspendOrder({id:row.id}).then(res =>{
          this.msgSuccess(" 该工单已取消挂单")
        })
        this.getList();
      },
      //转交
      handleCareOrders(row){
        this.$refs.cardRef.show({id: row.id})
      },
      //回访
      handleReturnOrders(row){
        this.$refs.returnRefs.show({id: row.id})
      },
      //取消
      handleChargebackOrders(row){
        this.$refs.chargeRef.show({id: row.id})
      },
      //挂单
      handleSuspendOrders(row){
        this.$refs.suspendRef.show({id: row.id})
      },
      //返修
      handleRepairOrders(row){
        this.$refs.repaifRef.show({id: row.id})
      },
      //退单
      handleRetreatOrder(row){
        this.$refs.reteRef.show({id: row.id})
      },
      clickView(row) {
        let me = this
        getWorkOrderType(row.orderType).then(res => {
          me.pageKey = res.data.associationForm
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            try {
              me.$refs.baseRefs.init({type: 'VIEW', id: row.id, orderType: res.data.id, typeName: res.data.typeName})
            } catch (e) {
              this.msgError("获取工单信息异常,请刷新重新尝试。")
            }
            loading.close();
          }, 1000)
        })
      }
    }
  };
</script>
